<template>
	<view class="page">
		<image :src="info.tps[0]" @click="previewBigImg(info.tps[0],info.tps)" class="header-bg" />
		<view class="content">
			<view class="item">
				<view class="left-name">停车点：</view>
				<view class="right-info"> {{ parkDetail.title }}</view>
			</view>
			<view class="tag-box">
				<view v-for="tag in tagList(parkDetail)" :key="tag" class="tag-item">
					{{ tag }}
				</view>
			</view>
			<view class="item">
				<view class="left-name">距离：</view>
				<view class="right-info">
					{{ '距您' + parkDetail.distanceInKm + '公里 | ' + parkDetail.address }}
				</view>
			</view>
			<view class="item">
				<view class="left-name">地点：</view>
				<view class="right-info">
					{{parkDetail.address }}
				</view>
			</view>
			<view class="item">
				<view class="left-name" style="width: 100px;">详细描述：</view>
				<view class="right-info"> {{ parkDetail.descs }}</view>
			</view>
		</view>
		<view class="footer-button">
			<text @click="delCurInfo()" v-if="info.status == '审核失败'">删除该信息</text>
			<text @click="editCurInfo(info)" v-if="info.status == '审核失败'">修改该信息</text>
			<text @click="previewMap()" v-if="info.status == '审核成功'">导航去这</text>
		</view>
	</view>
</template>

<script>
	import {
		parkInfoDetail,
		parkInfoDetailDelete
	} from '@/api/parkInfo.js'

	export default {

		data() {
			return {
				location: {
					longitude: 0,
					latitude: 0,
				},
				parkDetail: {},
				info: {},
			}
		},
		onLoad(options) {
			if (options.data) {
				this.parkDetail = JSON.parse(decodeURIComponent(options.data))
				console.log('数据传输parkDetail', this.parkDetail);
			}
			this.location = wx.getStorageSync('location')
			console.log("this.location: ", this.location);
			this.getCurInfo()

		},
		methods: {
			async getCurInfo() {
				const params = {
					// currentZb: this.parkDetail.zb,
					currentZb: `${this.location.longitude},${this.location.latitude}`,
					id: this.parkDetail.id
				}
				console.log("info-detail-params: ", params);
				const response = await parkInfoDetail(params)
				this.info = response.data
				console.log("info-detail-response: ", response);
			},
			previewBigImg(src, list) {
				console.log("src: ", src);
				console.log("list: ", list);
				wx.previewImage({
					current: src,
					urls: [src]
				})
			},
			tagList(data) {
				if (!data.sfmsText) return
				let list = data.sfmsText.split(',').concat(data.tclxText.split(','));
				if (data.sfcd) {
					list.push('充电桩');
				}
				return list;
			},
			previewMap() {
				const locationData = this.info.zb.split(',');
				uni.openLocation({
					longitude: Number(locationData[0]),
					latitude: Number(locationData[1]),
				});
			},

			async delCurInfo() {
				console.log("删除--id: ", this.parkDetail.id);
				const response = await parkInfoDetailDelete(this.parkDetail.id)
				console.log("response.data: ", response.data);
				if (response.data.code == 0) {
					uni.showToast({
						title: '删除成功'
					})
					// uni.navigateBack({
					// 	delta: 1
					// })
					uni.navigateTo({
						url: '/pages/subPack/info-share/info-share'
					})
				} else {
					console.log("666: ", 666);
					console.log("response.data: ", response.data);
					uni.showToast({
						title: response.data.msg
					})
				}
			},

			editCurInfo(info) {
				uni.showToast({
					title: '暂不支持修改'
				})
				return
				uni.navigateTo({
					url: `/pages/subPack/info-share/info-upload?upData=${encodeURIComponent(JSON.stringify(info))}`
				})
			},


			Rad(d) {
				return (d * Math.PI) / 180.0; //经纬度转换成三角函数中度分表形式。
			},
			getMapDistance(lat1, lng1) {
				const radLat1 = this.Rad(lat1);
				const radLat2 = this.Rad(this.location.latitude);
				const a = radLat1 - radLat2;
				const b = this.Rad(lng1) - this.Rad(this.location.longitude);
				let s =
					2 *
					Math.asin(
						Math.sqrt(
							Math.pow(Math.sin(a / 2), 2) +
							Math.cos(radLat1) *
							Math.cos(radLat2) *
							Math.pow(Math.sin(b / 2), 2),
						),
					);
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000; //输出为公里
				s = s.toFixed(1);
				return s + 'km';
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.header-bg {
			width: 100%;
			height: 250px;
		}

		.content {
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			padding: 0 20rpx;

			.item {
				margin-top: 15px;
				display: flex;

				>.left-name {
					font-size: 15px;
					font-weight: 600;
					color: #000;
				}

				>.right-info {
					font-size: 14px;
					font-size: 400;
					color: #999;
				}
			}

			.tag-box {
				display: flex;
				margin: 20rpx 0;

				.tag-item {
					padding: 4rpx 16rpx;
					border-radius: 8rpx;
					color: white;
					font-size: 12px;
					background: #18bc37;
					margin-right: 8rpx;
				}
			}

		}

		.footer-button {
			position: fixed;
			bottom: 0;
			left: 0;
			height: 120rpx;
			background: white;
			width: 100%;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0 15px;

			>text {
				text-align: center;
				width: 100%;
				background: #2979ff;
				color: white;
				padding: 14rpx 0;
				border-radius: 999rpx;
			}
		}
	}
</style>
